<template>
  <div style='width: 100%'>
    <div class='box'>
      <!--  垫高页面  -->
    </div>
    <div id='playbar'>
      <aplayer :audio="audio" :lrcType="0" :autoplay="false" style="margin: 0 auto;width: 1020px;color: #242424"
        ref="aplayer" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Playbar',
  data() {
    return {
      audio: [
        {
          name: 'ninelie',
          artist: 'Aimer / EGOIST',
          url: 'https://music.163.com/song/media/outer/url?id=409872504.mp3',
          cover: 'https://p2.music.126.net/FNam2E4n64HiQ79UQb_rOw==/109951166739433603.jpg'
        }
      ],

    }
  },
  mounted() {
    this.$bus.$on("changeMusic", (music) => {
      if (music.ar === undefined){
        // 有些时候后台给的不是ar，是artists
        music.ar = music.artists
      }
      let artist = music.ar[0].name // 歌手名
      if (music.ar.length > 1) { // 如果歌手名有多个，则用/拼接
        artist = music.ar.reduce((pre, cur) => {
          return pre.name + '/' + cur.name
        })
      }
      if (music.al === undefined){
        music.al = music.album
      }
      this.audio = [{
        name: music.name,
        artist: artist,
        url: `https://music.163.com/song/media/outer/url?id=${music.id}.mp3`,
        cover: music.al.picUrl
      }]
      this.$refs.aplayer.play()
    })
    this.$bus.$on("changeMusiclist", (musiclist) => {
      let list = []
      // 提取url，歌手名，歌曲名，图片存进数组里
      musiclist.forEach(item => {
        let artist = item.ar[0].name // 歌手名
        if (item.ar.length > 1) { // 如果歌手名有多个，则用/拼接
          artist = item.ar.reduce((pre, cur) => {
            return pre.name + '/' + cur.name
          })
        }
        list.push({
          name: item.name,
          artist: artist,
          url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
          cover: item.al.picUrl
        })
      })
      this.audio = list
      this.$nextTick(() => {
        this.$refs.aplayer.play(); // 开始播放
        this.$refs.aplayer.hideList(); // 隐藏列表
      })
    })
  },
}
</script>

<style scoped>
.box {
  height: 70px;
}

#playbar {
  width: 100%;
  background-color: #242424;
  position: fixed;
  bottom: 0;
  color: white;
  z-index: 99999;
  padding: 2px;
}
</style>